<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        HIUI 前端页面框架 - 基础说明
    </title>
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" type="text/css" href="../../styles/hiui.css">
    <link rel="stylesheet" type="text/css" href="../../styles/site.css">

<body>
    
    <div class="site-header">
    <div class="site-container">
        <a class="logo">HIUI 前端框架</a>
    </div>
</div>
    <div class="site-container">
        <div class="site-tree">
            
<ul class="site-nav">
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">基础说明</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/info.html#start" class="site-nav-link">开始使用</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/info.html#module" class="site-nav-link">模块规范</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/info.html#issue" class="site-nav-link">常见问题</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/info.html#log" class="site-nav-link">更新日志</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">基础组件</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#normalize" class="site-nav-link">Normalize 排版</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#grid" class="site-nav-link">Grid 栅格系统</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#layout" class="site-nav-link">Layout 布局</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#font" class="site-nav-link">Font 字体图标</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#color" class="site-nav-link">Color 主题色彩</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#button" class="site-nav-link">Button 按钮</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#link" class="site-nav-link">Link 链接</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#animation" class="site-nav-link">Animation 动画</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#loading" class="site-nav-link">Loading CSS3 加载</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#assist" class="site-nav-link">Assist 辅助</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">表格</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/table.html#base" class="site-nav-link">Table 基础表格</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/table.html#responsive" class="site-nav-link">TableResponsive 数据表格</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/table.html#data" class="site-nav-link">DataTable 数据表格</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">表单组件</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#input" class="site-nav-link">Input 输入框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#select" class="site-nav-link">Select 选择框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#radio" class="site-nav-link">Radio 单选框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#checkbox" class="site-nav-link">Checkbox 多选框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#switch" class="site-nav-link">Switch 开关</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#autocomplete" class="site-nav-link">Autocomplete 自动完成</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#slider" class="site-nav-link">Slider 滑块</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#timepicker" class="site-nav-link">TimePicker 时间选择</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#rate" class="site-nav-link">Rate 评分</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#colorpicker" class="site-nav-link">ColorPicker 颜色选择器</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#inputnumber" class="site-nav-link">InputNumber 数字输入框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#cascader" class="site-nav-link">Cascader 级联选择</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#transfer" class="site-nav-link">Transfer 穿梭框</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">视图组件</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#timeline" class="site-nav-link">Timeline 时间线</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#step" class="site-nav-link">Step 步骤条</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#tag" class="site-nav-link">Tag 标签</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#tag" class="site-nav-link">Badge 徽标数</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#alert" class="site-nav-link">Alert 警告框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#avatar" class="site-nav-link">Avatar 头像</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#card" class="site-nav-link">Card 卡片</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#empty" class="site-nav-link">Empty 空状态</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#list" class="site-nav-link">List 列表</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#header" class="site-nav-link">Header 页头</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#article" class="site-nav-link">Article 文章</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#comment" class="site-nav-link">Comment 评论</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#skeleton" class="site-nav-link">Skeleton 骨架图</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#result" class="site-nav-link">Result 结果页</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#divider" class="site-nav-link">Divider 分割线</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#progress" class="site-nav-link">Progress 进度条</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#progress" class="site-nav-link">Tree 树形结构</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#progress" class="site-nav-link">Popover 气泡卡片</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#loadingbar" class="site-nav-link">LoadingBar 加载进度条</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#pagination" class="site-nav-link">Pagination 分页</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#message" class="site-nav-link">Message 全局提示</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#notice" class="site-nav-link">Notice 通知提醒</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#dialog" class="site-nav-link">Dialog 模态框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#collapse" class="site-nav-link">Collapse 折叠面板</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#tooltip" class="site-nav-link">Tooltip 文字提示</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#poptip" class="site-nav-link">Poptip 气泡提示</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#carousel" class="site-nav-link">Carousel 走马灯</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">导航组件</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#menu" class="site-nav-link">Menu 导航菜单</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#dropdown" class="site-nav-link">Dropdown 下拉菜单</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#tab" class="site-nav-link">Tab 标签页</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#breadcrumb" class="site-nav-link">Breadcrumb 面包屑</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#aside" class="site-nav-link">Aside 左右模态框</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">操作反馈</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#menu" class="site-nav-link">Menu 导航菜单</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#dropdown" class="site-nav-link">Dropdown 下拉菜单</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#tab" class="site-nav-link">Tab 标签页</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#breadcrumb" class="site-nav-link">Breadcrumb 面包屑</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#aside" class="site-nav-link">Aside 左右模态框</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">其他</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#affix" class="site-nav-link">Anchor 锚点</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#affix" class="site-nav-link">Affix 图钉</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#backtop" class="site-nav-link">BackTop 返回顶部</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#upload" class="site-nav-link">Upload 文件上传</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#validation" class="site-nav-link">Validation 表单验证</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#template" class="site-nav-link">Template 模版引擎</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#code" class="site-nav-link">Code 代码修饰器</a>
    </li>
    
    
</ul>
        </div>
        <div class="site-content">
            <h3 class="site-title">Forms 表单<a href="#normalize">#</a></h3>
            <h4 class="site-subtitle">1. 基本使用</h4>
            <div class="site-info">
                <form class="form">
                    <fieldset>
                        <legend>表单标题</legend>
                        <div class="form-item">
                            <label class="form-label"><span class="form-required">*</span>姓名</label>
                            <input type="text" class="form-input" autocomplete="false" placeholder="请输入" />
                        </div>
                        <div class="form-item">
                            <label class="form-label">禁用</label>
                            <input type="text" class="form-input" autocomplete="false" placeholder="请输入" disabled />
                        </div>
                        <div class="form-item">
                            <label class="form-label">只读</label>
                            <input type="text" class="form-input" autocomplete="false" placeholder="请输入" readonly />
                        </div>
                        <div class="form-item">
                            <label class="form-label"><span class="form-required">*</span>密码</label>
                            <input type="text" class="form-input" autocomplete="false" placeholder="请输入" />
                        </div>
                        <div class="form-item">
                            <label class="form-label">邮箱</label>
                            <p class="form-static">test@test.com</p>
                        </div>
                        <div class="form-item">
                            <label class="form-label">文件上传</label>
                            <input type="file" autocomplete="false" placeholder="请输入手机号码" />
                            <p class="form-help">请选择要上传的文件</p>
                        </div>
                        <div class="form-item">
                            <label class="form-label">单选框</label>
                            <select class="form-select">
                                <option value="">请选择问题</option>
                                <option value="你工作的第一个城市">你工作的第一个城市</option>
                                <option value="你的工号">你的工号</option>
                                <option value="你最喜欢的老师">你最喜欢的老师</option>
                            </select>
                        </div>
                        <div class="form-item">
                            <label class="form-label">禁用单选框</label>
                            <select class="form-select" disabled>
                                <option value="">请选择问题</option>
                            </select>
                        </div>
                        <div class="form-item">
                            <label class="form-label">下拉多选框</label>
                            <select class="form-select" multiple>
                                <option value="">请选择问题</option>
                                <option value="你工作的第一个城市">你工作的第一个城市</option>
                                <option value="你的工号">你的工号</option>
                                <option value="你最喜欢的老师">你最喜欢的老师</option>
                            </select>
                        </div>
                        <div class="form-item">
                            <label class="form-label">复选框</label>
                            <label class="form-check">
                                <input type="checkbox" name="check" title="写作">写作
                            </label>
                            <label class="form-check">
                                <input type="checkbox" name="check" title="阅读">阅读
                            </label>
                            <label class="form-check">
                                <input type="checkbox" name="check" title="游戏">游戏
                            </label>
                        </div>
                        <div class="form-item">
                            <label class="form-label">单选框</label>
                            <label class="form-radio">
                                <input type="radio" name="radio" title="写作">写作
                            </label>
                            <label class="form-radio">
                                <input type="radio" name="radio" title="阅读">阅读
                            </label>
                            <label class="form-radio">
                                <input type="radio" name="radio" title="游戏">游戏
                            </label>
                        </div>
                        <div class="form-item">
                            <label class="form-label">普通文本域</label>
                            <textarea placeholder="请输入内容" class="form-textarea"></textarea>
                        </div>
                        <div class="form-item">
                            <label class="form-check">
                                <input type="checkbox" name="check" title="同意协议">同意协议
                            </label>
                        </div>
                        <button type="submit" class="btn btn-primary">立即提交</button>
                        <button type="reset" class="btn">重置</button>
                    </fieldset>
                </form>
            </div>
            <h4 class="site-subtitle">2. 表单排列</h4>
            <h3 class="site-thititle">2.1 水平排列</h3>
            <div class="site-info">
                <form class="form form-horizontal">
                    <div class="form-item">
                        <label class="col-2 form-label"><span class="form-required">*</span>邮箱：</label>
                        <div class="col-10">
                            <p class="form-static">邮箱是test@test.com</p>
                        </div>
                    </div>
                    <div class="form-item">
                        <label for="" class="col-2 form-label">账号：</label>
                        <div class="col-10">
                            <input type="text" class="form-input" placeholder="账号">
                        </div>
                    </div>
                    <div class="form-item">
                        <label for="" class="col-2 form-label">密码：</label>
                        <div class="col-10">
                            <input type="password" class="form-input" placeholder="密码">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="col-10 col-offset-2">
                            <label>
                                <input type="checkbox"> 记住我
                            </label>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="col-10 col-offset-2">
                            <button class="btn btn-primary">提交</button>
                        </div>
                    </div>
                </form>
            </div>
            <h3 class="site-thititle">2.2 行内排列</h3>
            <div class="site-info">
                <form class="form form-inline">
                    <div class="form-item">
                        <label for="" class="form-label">账号：</label>
                        <input type="text" class="form-input" placeholder="账户">
                    </div>
                    <div class="form-item">
                        <label for="" class="form-label">密码：</label>
                        <input type="password" class="form-input" placeholder="密码">
                    </div>
                    <div class="form-item">
                        <label>
                            <input type="checkbox"> 记住我
                        </label>
                    </div>
                    <button class="btn btn-primary">提交</button>
                </form>
            </div>
            <h3 class="site-subtitle">3 验证状态</h3>
            <h4 class="site-thititle">3.1 基本使用</h4>
            <div class="site-info">
                <form action="" class="form">
                    <div class="form-item has-success">
                        <label class="form-label">验证成功</label>
                        <input type="text" class="form-input" autocomplete="false" placeholder="请输入" />
                    </div>
                    <div class="form-item has-warning">
                        <label class="form-label">验证警告</label>
                        <input type="text" class="form-input" autocomplete="false" placeholder="请输入" />
                    </div>
                    <div class="form-item has-danger">
                        <label class="form-label">验证失败</label>
                        <input type="text" class="form-input" autocomplete="false" placeholder="请输入" />
                    </div>
                    <div class="form-item has-feedback has-success">
                        <label class="form-label">验证成功</label>
                        <select class="form-select">
                            <option value="">请选择问题</option>
                            <option value="你工作的第一个城市">你工作的第一个城市</option>
                            <option value="你的工号">你的工号</option>
                            <option value="你最喜欢的老师">你最喜欢的老师</option>
                        </select>
                    </div>
                    <div class="form-item has-danger">
                        <label class="form-label">普通文本域</label>
                        <textarea placeholder="请输入内容" class="form-textarea"></textarea>
                    </div>
                </form>
            </div>
            <h4 class="site-thititle">3.2 带图标提示</h4>
            <div class="site-info">
                <form action="" class="form">
                    <div class="form-item has-feedback has-success">
                        <label class="form-label">验证成功</label>
                        <div class="form-group">
                            <input type="text" class="form-input" autocomplete="false" placeholder="请输入" />
                            <span class="hiicon hiicon-check"></span>
                        </div>
                    </div>
                    <div class="form-item has-feedback has-warning">
                        <label class="form-label">验证警告</label>
                        <div class="form-group">
                            <input type="text" class="form-input" autocomplete="false" placeholder="请输入" />
                            <span class="hiicon hiicon-exclaimination"></span>
                        </div>
                    </div>
                    <div class="form-item has-feedback has-danger">
                        <div class="form-group">
                            <label class="form-label">验证失败</label>
                            <div class="form-group">
                                <input type="text" class="form-input" autocomplete="false" placeholder="请输入" />
                                <span class="hiicon hiicon-close"></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-item has-feedback has-danger">
                        <div class="form-group">
                            <label class="form-label">验证成功</label>
                            <div class="form-group">
                                <select class="form-select">
                                    <option value="">请选择问题</option>
                                    <option value="你工作的第一个城市">你工作的第一个城市</option>
                                    <option value="你的工号">你的工号</option>
                                    <option value="你最喜欢的老师">你最喜欢的老师</option>
                                </select>
                                <span class="hiicon hiicon-check"></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-item has-feedback has-danger">
                        <label class="form-label">普通文本域</label>
                        <div class="form-group">
                            <textarea placeholder="请输入内容" class="form-textarea"></textarea>
                            <span class="hiicon hiicon-close"></span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../../scripts/vendor.js"></script>
    <script type="text/javascript" src="../../scripts/site.js"></script>
</body>

</html>